<template>
  <a-popover
    :visible="modelValue"
    @update:visible="$emit('update:modelValue', $event)"
    trigger="click"
    placement="bottomRight"
    :overlayStyle="{ width: '300px' }"
  >
    <template #content>
      <div class="download-progress">
        <div v-if="tasks.length === 0" class="empty-state">暂无下载任务</div>
        <template v-else>
          <div v-for="task in tasks" :key="task.id" class="task-item">
            <div class="task-info">
              <div class="filename">{{ task.filename }}</div>
              <div class="status">{{ task.status }}</div>
            </div>
            <a-progress
              :percent="task.progress"
              :status="task.status === '已失败' ? 'exception' : undefined"
              :showInfo="false"
              size="small"
            />
          </div>
          <div class="actions">
            <a-button type="text" size="small" @click="$emit('clear-completed')">
              清除已完成
            </a-button>
          </div>
        </template>
      </div>
    </template>
    <slot></slot>
  </a-popover>
</template>

<script setup lang="ts">
</script>

<style scoped>
  .download-progress {
    padding: 8px;
  }

  .empty-state {
    text-align: center;
    color: #999;
    padding: 16px;
  }

  .task-item {
    padding: 8px;
    border-bottom: 1px solid #f0f0f0;
  }

  .task-item:last-child {
    border-bottom: none;
  }

  .task-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
  }

  .filename {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 8px;
  }

  .status {
    font-size: 12px;
    color: #999;
  }

  .actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
  }
</style>
